<template>
    <van-contact-card  type="edit" :name="`${address.consignee} ${address.region_text} ${address.address}`" :tel="address.mobile" :editable="false" />

    <div v-for="(item, key) in product" :key="key">
        <van-card 
            :num="item.pronum"
            :title="item.products.name"

            :thumb="item.products.thumb_text"
            >
            <template #title>
                <div plain type="danger">{{ item.products.name }}</div>
            </template>
            <template #desc v-if="item.attrs">
                <van-tag v-for="(item,index) in item.attrs" :key="index" class="tag" type="danger">{{ item.value }}</van-tag>
            </template>
            <template #desc v-else>
                <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>
        
            <template #tags>
                <div class="price">单价：￥{{ item.products.price }}</div>
            </template>
        
            <template #price>
                <div class="price">合计：￥{{ item.total }}</div>
            </template>
            
            <!-- <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
            </template> -->
        </van-card>

        <div>
            <!-- remark[`${item.id}`] 双向绑定 先设置这里 -->
            <van-field
                v-model="remark[`${item.id}`]"
                rows="3"
                autosize
                label="备注"
                type="textarea"
                maxlength="50"
                placeholder="请输入退款退货原因"
                show-word-limit
                />
        </div>

        <div v-if="orderinfo.status == '1'" class="button-right">
            <van-button class="button" type="danger" size="small" @click="RefundIndex(item.id)">退 款</van-button>
        </div>
    </div>
</template>

<script setup>

import { onMounted } from 'vue';

    const {proxy} = getCurrentInstance()

    let orderid = proxy.$route.query.orderid? proxy.$route.query.orderid : 0
    let address = ref([])
    let orderinfo = ref([])
    let product = ref([])

    let remark = ref([])

    onMounted(() =>{
        ProductInfo()
    })

    const ProductInfo = async () => {
        var params = {
            orderid,
            busid:proxy.$business.value.id,
        }

        var result = await proxy.$POST({
            url:'/order/info',
            params,
        })

        // console.log(result)
        // return false

        if(result.code==0)
        {
            proxy.$fail(result.msg)
            return false
        }

        address.value = result.data.address
        orderinfo.value = result.data.orderinfo

        result.data.product.map(item => {
            item.attrs = JSON.parse(item.attrs)
        })

        product.value = result.data.product
    }

    const RefundIndex = async (OrderProductid) => {
        // console.log(OrderProductid)
        var params = {
            busid:proxy.$business.value.id,
            OrderProductid,
            refundreason:remark.value[`${OrderProductid}`],

        }
        // console.log(remark.value)


        // console.log(params)
        var result = await proxy.$POST({
            url:'/order/refund',
            params,
        })

        var success = 0
        var error = 0
        if(result.code == 0)
        {
            error++
        }else
        {
            success++
        }

        proxy.$success({
            message:'退款成功',
            onClose: () => proxy.$router.go(-1)
        })
        // proxy.$success(result.msg)
        // proxy.$router.push('/order')
        // console.log(remark)
        // return false



    }





</script>

<style>
.button-right{
    display: flex;
    justify-content: flex-end;
}
.button{
    margin-right: 10px;
    width: 10em;
    font-size: 1em;
}
</style>